<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t('menu.M_pass_center') }}
      <template #rightButtons>
        <el-button type="primary" class="w-8" @click="handleDesign">
          <svg-icon icon-class="outlined-highlight" class="text-lg" />
        </el-button>
      </template>

      <template #subtitle>
        {{ $t('flypass.pass_center_subtitle') }}
      </template>
    </PageTitle>
    <!-- <el-tabs v-model="activeName">
      <el-tab-pane :label="$t('modules.pass.membership_card')" name="first"
        ><usedMembership
      /></el-tab-pane>
      <el-tab-pane :label="$t('modules.pass.coupon')" name="second" />
    </el-tabs> -->
    <usedMembership/>
  </div>
</template>

<script>
import usedMembership from './components/usedMembership.vue'
import PageTitle from '@/components/PageTitle/index.vue'
export default {
  name: 'Operator',
  components: {
    usedMembership,
    PageTitle
  },
  data() {
    return {
      isDesign: false,
      activeName: 'first'
    }
  },
  mounted() {},
  methods: {
    handleDesign() {
      this.$router.push({ path: `/topic` })
    },
    back() {
      this.isDesign = false
    }
  }
}
</script>
<style lang="scss" scope>
.app-container {
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;

  &--border-none {
    border-radius: 0;
  }
}
.filterLabel {
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-gray-10);
}
</style>
<style>
.operatorDrawer .el-overlay {
  background-color: transparent;
}
</style>
